<template>
    <div id="SignIn">
        <div class="cover">
            <div id="leftPanel">
                <div id="leftTop">
                    <div class="circle">彩票分析</div>
                    <div class="circle">彩票数据</div>
                    <div class="circle">彩票列表</div>
                </div>
                <div id="leftBottom">
                    <ul>
                        <li>
                            <i class="fa fa-camera-retro"></i>
                            <span>彩票资讯</span>
                        </li>
                        <li>
                           <i class="fa fa-university" aria-hidden="true"></i>
                            <span>彩票管理</span>
                        </li>
                        <li>
                            <i class="fa fa-cog" aria-hidden="true"></i>
                            <span>彩票工具</span>
                        </li>
                        <li>
                            <i class="fa fa-bar-chart" aria-hidden="true"></i>
                            <span>数据图表</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="rightPanel">
                <!-- 使用el-form表单验证
                    model: 是要验证的对象
                    rules: 要验证的各种规则
                    ref: 给el-form元素标记,方便确定是否全部通过验证
                 -->
                <el-form :model="userInfo" :rules="rules" ref="userInfo">
                <ul>
                    <li style="font-size:40px;color:white">
                        可米彩票
                    </li>
                    <li style="width:80%">
                        <!-- 
                            如果要验证el-form表单里的元素,这些元素
                            就需要放到el-form-item元素
                            其中el-form-item元素的prop属性和
                            验证规则里的属性名保持一致,
                            也就是你想验证哪个属性就和哪个验证属性名保持一致
                         -->
                        <el-form-item prop="accountName">
                            <el-input placeholder="请输入用户名" 
                            class="userInput"
                            v-model="userInfo.accountName"
                            />
                        </el-form-item>
                    </li>
                    <li style="width:80%">
                        <el-form-item prop="password">
                            <el-input placeholder="请输入密码"
                            type="password"
                            class="userInput"
                            v-model="userInfo.password"
                            />
                        </el-form-item>
                    </li>
                    <li style="text-align:left;padding-left:0px">
                        <el-switch
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            v-model="remember"
                        >
                        </el-switch>
                        <span style="color:white;margin-left:10px">记住密码</span>
                    </li>
                    <li>
                        <el-button type="primary" style="width:100%"
                            @click="signin"
                        >登录</el-button>
                    </li>
                </ul>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        accountName: "zmt",
        password: "12345"
      },
      // 校验规则
      rules: {
        // 校验用户名的规则
        accountName: [
          /*
                        required: true  必填
                        message: 不符合规则的时候,弹出的提示
                        trigger: 在什么时候执行这个校验
                    */

          { required: true, message: "用户名不能为空", trigger: "blur" },
          { min: 2, max: 20, message: "字符不能少于2个字符", trigger: "blur" }
        ],
        // 密码的验证规则
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 5, max: 12, message: "密码不能少于5个字符", trigger: "blur" }
        ]
      },
      remember: true
    };
  },
  methods: {
    signin() {
      this.$refs["userInfo"].validate(valid => {
        if (valid) {
          // 当所有的验证通过之后,执行这个代码块
          this.$http.post(this.$apis.SignIn, this.userInfo).then((resp) => {
            // 登录成功,将返回的数据存储到localStorage
            if (resp.data.success) {
              localStorage.setItem("remember", this.remember);
              localStorage.setItem("token", resp.data.token);
              localStorage.setItem(
                "response",
                JSON.stringify(resp.data.response)
              );
              // 登录成功跳转到原来想要跳转的页面(组件)
              if (this.$route.query.redirect) {
                this.$router.push(this.$route.query.redirect);
              } else {
                // 如果没有重定向的路径,则默认跳转到Home路径下
                this.$router.push("/Home");
              }
            } else {
              //登录失败,弹出提示,使用用登录失败
              this.$message.error("登录失败,请重新登录");
            }
          });
        } else {
          // 如果还有未通过验证的,则执行该代码块
          // console.log('error submit!!');
          console.log("还有未通过验证的,请注意");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
#SignIn {
  width: 100%;
  height: 100%;
  background: url("../../assets/loginBG.jpg") no-repeat;
  background-size: cover;
  .cover {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    #leftPanel {
      width: 70%;
      height: 100%;
      #leftTop {
        width: 100%;
        height: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
        .circle {
          width: 200px;
          height: 200px;
          border-radius: 50%;
          &:nth-child(1) {
            position: absolute;
            top: 20%;
            background: rgba(240, 197, 158, 0.3);
          }
          &:nth-child(2) {
            position: absolute;
            top: 35%;
            left: 33%;
            background: rgba(85, 212, 191, 0.3);
          }
          &:nth-child(3) {
            position: absolute;
            left: 23%;
            top: 35%;
            background: rgba(82, 89, 197, 0.3);
          }
        }
      }
      #leftBottom {
        width: 100%;
        height: 30%;
        ul {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          li {
            margin-left: 80px;
            display: flex;
            flex-direction: column;
            color: rgba(255, 255, 255, 0.5);
            span {
              margin-top: 20px;
              text-align: center;
            }
            i {
              font-size: 60px;
            }
          }
        }
      }
    }
    #rightPanel {
      width: 30%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      ul {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        li {
          text-align: center;
          margin-bottom: 20px;
          width: 80%;
          .userInput {
            width: 100%;
            text-align: center;
            & > /deep/.el-input__inner {
              background: rgba(0, 0, 0, 0);
              width: 100%;
            }
          }
        }
      }
    }
  }
}
</style>
